<template>
  <div class="dashboard-container">
    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
                class="w-20 h-20 mr-5 rounded-full"
                src="@/assets/images/user.png"
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                当前时间：{{ showTimer }}
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <template #header>
        <div class="flex items-center justify-between">
          <span class="text-[var(--el-text-color-secondary)]">我的信息</span>
        </div>
      </template>
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="h-full items-center" style="line-height: 3;">
            <div style="width: 100%">
              <span>账号：<span style="color:grey;">{{ userStore.user.username }}</span></span>
            </div>
            <div style="width: 100%">
              <span>昵称：<span style="color:grey;">{{ userStore.user.nickname }}</span></span>
            </div>
            <div style="width: 100%">
              <span>手机：<el-input style="width: 300px" type="number" v-model="userUpdateData.mobile" placeholder="请输入手机号码" clearable/></span>
            </div>
            <div style="width: 100%">
              <span>邮箱：<el-input style="width: 300px"  v-model="userUpdateData.email" placeholder="请输入邮箱" clearable/></span>
            </div>
            <div style="width: 100%">
              <span>创建时间：<span style="color:grey;">{{ userStore.user.user.createTime }}</span></span>
            </div>
            <div style="width: 100%">
              <span>最后修改时间：<span style="color:grey;">{{ userStore.user.user.updateTime }}</span></span>
            </div>
            <div style="width: 100%">
              <el-button type="primary" @click="updateUser">保存</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import type {EpPropMergeType} from "element-plus/es/utils/vue/props/types";
import {useUserStore} from "@/store/modules/user";
import UserAPI from "@/api/user/index";
import {TransitionPresets, useTransition} from "@vueuse/core";
import {onMounted} from "vue";

defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
const userStore = useUserStore();
const userUpdateData = ref({});
const showTimer = ref(null);
const showTimerInterval = ref(null);
const updateUser = () => {
  UserAPI.updateSelfInfo(userUpdateData.value).then((response) => {
    if (response.status) {
      ElMessage({
        message: response.message,
        type: 'success'
      })
    }
    userStore.getUserInfo().then(()=>{
      window.location.reload()
    })
  });
}
onMounted(() => {
  userUpdateData.value.id = userStore.user.user.id;
  userUpdateData.value.mobile = userStore.user.user.mobile;
  userUpdateData.value.email = userStore.user.user.email;

  showTimer.value = new Date().toLocaleTimeString(); // 设置初始时间

  showTimerInterval.value = setInterval(() => {
    showTimer.value = new Date().toLocaleTimeString(); // 每秒更新一次时间
  }, 1000);
});
onBeforeUnmount(() => {
  if (showTimerInterval.value) {
    clearInterval(showTimerInterval.value); // 组件卸载前清除定时器
    showTimerInterval.value = null;
  }
});


const date: Date = new Date();

const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.nickname + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.nickname + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.nickname + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

const duration = 5000;

// 销售额
const amount = ref(0);
const amountOutput = useTransition(amount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;

// 访客数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;

// IP数
const dauCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
dauCount.value = 2000;

// 订单量
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
orderCount.value = 2000;

// 右上角数量
const statisticData = ref([
  {
    value: 99,
    iconClass: "message",
    title: "消息",
    key: "message",
  },
  {
    value: 50,
    iconClass: "todolist",
    title: "待办",
    suffix: "/100",
    key: "upcoming",
  },
  {
    value: 10,
    iconClass: "project",
    title: "项目",
    key: "project",
  },
]);

interface CardProp {
  title: string;
  tagType: EpPropMergeType<
      StringConstructor,
      "primary" | "success" | "info" | "warning" | "danger",
      unknown
  >;
  tagText: string;
  count: any;
  dataDesc: string;
  iconClass: string;
}

// 卡片数量
const cardData = ref<CardProp[]>([
  {
    title: "访客数",
    tagType: "success",
    tagText: "日",
    count: visitCountOutput,
    dataDesc: "总访客数",
    iconClass: "visit",
  },
  {
    title: "IP数",
    tagType: "success",
    tagText: "日",
    count: dauCountOutput,
    dataDesc: "总IP数",
    iconClass: "ip",
  },
  {
    title: "销售额",
    tagType: "primary",
    tagText: "月",
    count: amountOutput,
    dataDesc: "总IP数",
    iconClass: "money",
  },
  {
    title: "订单量",
    tagType: "danger",
    tagText: "季",
    count: orderCountOutput,
    dataDesc: "总订单量",
    iconClass: "order",
  },
]);
// 图表数据
const chartData = ref(["BarChart", "PieChart", "RadarChart"]);
const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./components/${item}.vue`));
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
